<template>
	<view class="inputer">
		<label v-if="title">{{title}}</label>
		<view :class="{'input_box': true,'top': titlePosition==='top', 'left': titlePosition === 'left'}">
			<!-- <icon :type="prefixIcon" size="18" color="#fff"/> -->
			<input @input="change" :type="cType" class="uni-input" :placeholder="placeholder" placeholder-class= "phsy" :value="value"/>
			<uni-icons v-if="caffixIcon" :type="caffixIcon" size="20" @tap="changeIcons"/>
			
		</view>
	</view>
</template>

<script setup>
import {ref, computed} from "vue"
import "@/uni_modules/uni-icons/components/uni-icons/icons.js"
const props = defineProps({
	value: String,
	placeholder: String,
	title: String,
	titlePosition: {
		type: String,
		default: 'top'
	},
	type: {
		type: String,
		default: 'text'
	},
	prefixIcon: String,
	affixIcon: String
});
const showPwd = ref(false)
const caffixIcon = computed(()=>props.type==='password' && showPwd.value ? 'eye-filled' : props.type==='password'?  'eye-slash-filled' : props.affixIcon)
const cType = computed(()=>props.type==='password' && showPwd.value ? 'text' : props.type)
const changeIcons = ()=>{
	showPwd.value = !showPwd.value;
	// caffixIcon.value = showPwd.value ? 'eye-filled' : 'eye-slash-filled'
}
const emit = defineEmits(["update:value"]);
const change=(value)=>{
	emit('update:value', value.detail.value)
}
</script>

<style lang="sass" scoped>
.phsy
	color: #999 !important
.inputer
	height: 102rpx
	line-height: 102rpx
	background: #F5F5F5
	border-radius: 52px
	padding-left: 48rpx
	display: flex
	align-items: center
	&.top
		flex-direction: column
	label
		font-size: 26rpx
		font-family: Source Han Sans CN
		font-weight: bold
		color: #455BDF
		padding-right: 64rpx
	.input_box
		display: flex
		height: 100%
		flex: 1
		align-items: center
		font-size: 26rpx
		color: #fff
		input
			height: 100%
			font-size: 26rpx
			font-family: Source Han Sans CN
			font-weight: 400
			color: #364B73
			background: #f5f5f5
			text-align: left
			padding: 0
	:deep(uni-icon)
		margin-right: 12rpx
		margin-left: 30rpx
:deep(.uni-input-placeholder)
	font-size: 30rpx
	color: #fff
	font-weight: 500
	line-height: 65rpx
</style>
